<!--
 * @Descripttion: 筛选按钮
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-19 15:23:52
-->
<template>
  <div :class="['filterBtn', !!true ? 'filterDetail' : '']">
    <div class="filterBtn-pre">
      <slot />
    </div>
    <!-- 图标插槽 -->
    <div class="filterBtn-span" @click="handleFilterSearch">
      <!-- 按钮图标 -->
      <ToolsIcon
        v-if="toolBtnItem.icon"
        :icon="toolBtnItem.icon"
        :name="toolBtnItem.iconName"
      />
      <span> {{ $t(`${toolBtnItem.label}`) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ToolsIcon from "../tools-icon/index.vue";

const emit = defineEmits(["filterSearch"]);

const props = defineProps({
  //按钮数据源
  toolBtnItem: {
    type: Object,
    requited: {},
    default: true,
  },
});
/**
 * @Author: xzh
 * @Descripttion:是否显示详情
 * @Param:
 */
let isDetail = ref<boolean>(false);

/**
 * @Author: xzh
 * @Descripttion:筛选搜索
 * @Param:
 */
let handleFilterSearch = () => {
  isDetail.value = !isDetail.value;
  //回调筛选事件
  // emit("filterSearch", isDetail.value);
  emit("filterSearch", false);
};
</script>
<style lang="scss" scoped>
.filterBtn {
  &,
  .filterBtn-span {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .filterBtn-pre {
    display: none;
  }
  .filterBtn-span {
    height: 2rem;
    width: auto;
    font-size: var(--el-font-size-base);
    color: var(--el-text-color-regular);
    cursor: pointer;
    border: 0;
    :deep(span) {
      display: block;
    }
  }
}
.filterDetail {
  .filterBtn-pre {
    display: block;
    :deep(.el-input) {
      width: 8rem;
      height: 2rem;
      .el-input__wrapper {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
      }
    }
  }
  .filterBtn-span {
    width: 1.6rem;
    border: 1px solid var(--el-border-color);
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    border-left: none;
    :deep(span) {
      display: none;
    }
  }
}
</style>
